<template>
  <view class="favorite-container">
    <!-- 收藏列表 -->
    <view class="favorite-list">
      <view class="favorite-item" v-for="(item, index) in favoriteList" :key="index" @tap="viewDetail(item)">
        <image class="course-image" :src="item.image" mode="aspectFill"></image>
        <view class="course-info">
          <text class="course-name">{{ item.name }}</text>
          <view class="teacher-info">
            <image class="teacher-avatar" :src="item.teacherAvatar" mode="aspectFill"></image>
            <text class="teacher-name">{{ item.teacherName }}</text>
          </view>
          <view class="course-footer">
            <text class="price">¥{{ item.price }}/课时</text>
            <view class="action-btns">
              <button class="action-btn" @tap.stop="cancelFavorite(item)">取消收藏</button>
              <button class="action-btn primary" @tap.stop="register(item)">立即报名</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="favoriteList.length === 0">
      <image class="empty-icon" src="/static/empty-favorite.png" mode="aspectFit"></image>
      <text class="empty-text">暂无收藏课程</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favoriteList: [
        {
          id: 1,
          name: '高中数学一对一辅导',
          teacherName: '张老师',
          teacherAvatar: '/static/teacher-avatar.png',
          price: '299',
          image: '/static/course-default.png'
        },
        // 更多收藏数据...
      ]
    }
  },
  methods: {
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/course/detail?id=${item.id}`
      })
    },
    cancelFavorite(item) {
      uni.showModal({
        title: '提示',
        content: '确定取消收藏该课程吗？',
        success: (res) => {
          if (res.confirm) {
            // 取消收藏逻辑
            this.favoriteList = this.favoriteList.filter(i => i.id !== item.id)
          }
        }
      })
    },
    register(item) {
      uni.navigateTo({
        url: `/pages/course/register?id=${item.id}`
      })
    }
  }
}
</script>

<style>
.favorite-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.favorite-list {
  margin-bottom: 20rpx;
}

.favorite-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.course-image {
  width: 100%;
  height: 300rpx;
}

.course-info {
  padding: 20rpx;
}

.course-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.teacher-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.teacher-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
}

.teacher-name {
  font-size: 26rpx;
  color: #666;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.action-btns {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  min-width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
  background: #f5f5f5;
  color: #666;
  margin: 0;
}

.action-btn.primary {
  background: #4080FF;
  color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 